<template>
	<view>
		<view class="bgc">
			<navbar></navbar>
			<view class="profile">
				<u-avatar size="65" :src="userInfo.avatar ? userInfo.avatar : ''"></u-avatar>
			</view>
		</view>
		<view class="content">
			<view class="userinfo">
				<view v-if="isLogin" class="userinfo_text" @click="goProfile">
					<view>
						<view class="name m-bottom-10">{{ userInfo.nickname }}</view>
						<view class="flex">
							<view class="attestation" v-if="userInfo.is_identity == '2'">
								<image src="/static/image/attestation.png"></image>
								<text>已认证</text>
							</view>
							<view class="attestation" v-else style="background-color: #eee;">
								<image src="/static/image/no_attestation.png"></image>
								<text style="color: #cdcdcd;">
									{{ userInfo.is_identity == '0' ? '未认证' : '审核中' }}
								</text>
							</view>
							<text class="sex">{{ userInfo.gender == 0 ? '女' : '男' }}</text>
							<image
								src="/static/image/member.png"
								v-if="Number(userInfo.vip) == 1"
								class="member_image"
							></image>
						</view>
					</view>
					<image src="/static/image/right.png" class="right"></image>
				</view>
				<view v-else class="userinfo_text" @click="goProfile">
					<u--text
						:text="language == 'zh' ? '点击登录' : 'تىزىملىتىشنى چېكىش. '"
						size="20"
						margin="10px 0"
						bold
					/>
					<image src="/static/image/right.png" class="right"></image>
				</view>
			</view>
			<view class="member">
				<view class="member_yes" v-if="Number(userInfo.vip) == 1">
					<view class="left_no">
						<image src="/static/image/member.png" class="member_img"></image>
						<image src="/static/image/member_4.png" class="member_1"></image>
						<view>{{ timewhole(userInfo.expiration_time) }}</view>
					</view>
					<image @click="goMember" src="/static/image/member_5.png" class="member_2"></image>
				</view>
				<view class="member_no" v-else>
					<view class="left_no">
						<image src="/static/image/member.png" class="member_img"></image>
						<image src="/static/image/member_1.png" class="member_1"></image>
						<view>开通会员,享受优惠</view>
					</view>
					<image @click="goMember" src="/static/image/member_2.png" class="member_2"></image>
				</view>
			</view>
			<view class="box">
				<view class="grid_2">
					<view class="wallet" @click="goDetail('wallet')">
						<u--text
							:text="$t('my.walletTitle')"
							lines="1"
							color="#1C1C1C"
							size="15"
							bold
							margin="0 0 10rpx 0"
						/>
						<u--text :text="$t('my.walletDescribe')" lines="1" color="#858B92" size="13" />
					</view>
					<view class="discounts" @click="goDetail('discounts')">
						<u--text
							:text="$t('my.discountsTitle')"
							lines="1"
							color="#1C1C1C"
							size="15"
							bold
							margin="0 0 10rpx 0"
						/>
						<u--text :text="$t('my.discountsDescribe')" lines="1" color="#858B92" size="13" />
					</view>
				</view>
				<view class="merchant" @click="goDetail('merchant')">
					<u--text
						:text="status == 3 ? $t('my.status_title') : $t('my.merchantTitle')"
						color="#1C1C1C"
						size="15"
						bold
						margin="0rpx 0rpx 10rpx 0rpx"
					/>
					<u--text
						:text="status == 3 ? $t('my.status_describe') : $t('my.merchantDescribe')"
						color="#858B92"
						size="13"
					/>
				</view>
				<view class="list">
					<button
						class="item"
						:open-type="item.zh == '邀请好友' ? 'share' : ''"
						v-for="(item, index) in list"
						:key="index"
						@click="goPath(item)"
					>
						<view class="flex">
							<image :src="item.icon" :style="{ width: item.width, height: item.height }"></image>
							<u--text
								:text="language == 'zh' ? item.zh : item.en"
								color="#4E4E4E"
								size="16"
								margin="0 0 0 10px"
							></u--text>
						</view>
						<u-icon name="arrow-right" color="#989898" size="20"></u-icon>
					</button>
				</view>
			</view>
		</view>
		<u-popup
			:show="show"
			@close="show = false"
			mode="center"
			:safeAreaInsetBottom="false"
			:round="22"
		>
			<view class="member_popup">
				<u--text
					text="开通平台会员"
					color="#231916"
					bold
					size="40rpx"
					margin="15px 10px 10px 20px"
				/>
				<u--text
					text="享受优惠权益"
					color="#231916"
					size="30rpx"
					margin="10px 10px 85px 20px"
				></u--text>
				<scroll-view scroll-x>
					<view class="grid_3">
						<view
							class="grid_item"
							@click="price = member.month"
							:class="[price == member.month ? 'active' : '']"
						>
							<u--text text="一月" color="#231916" size="26rpx" />
							<view class="grid_price">
								<view class="price_left">￥</view>
								<view class="price_right">{{ member.month ? member.month : 0 }}</view>
							</view>
						</view>
						<view
							class="grid_item"
							@click="price = member.season"
							:class="[price == member.season ? 'active' : '']"
						>
							<u--text text="一季度" color="#231916" size="26rpx" />
							<view class="grid_price">
								<view class="price_left">￥</view>
								<view class="price_right">{{ member.season ? member.season : 0 }}</view>
							</view>
						</view>
						<view
							class="grid_item"
							@click="price = member.yeaar"
							:class="[price == member.yeaar ? 'active' : '']"
						>
							<u--text text="一年" color="#231916" size="26rpx" />
							<view class="grid_price">
								<view class="price_left">￥</view>
								<view class="price_right">{{ member.yeaar ? member.yeaar : 0 }}</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<u-button
					text="立即开通"
					shape="circle"
					:customStyle="btnStyle"
					@click="getDredge"
					:disabled="price == ''"
				></u-button>
			</view>
		</u-popup>
		<tabbar :value="3"></tabbar>
	</view>
</template>

<script>
import { mapActions, mapGetters, mapMutations } from 'vuex';
export default {
	data() {
		return {
			list: [
				{
					icon: '/static/image/evaluate.png',
					width: '31rpx',
					height: '30rpx',
					zh: '我的评价',
					en: 'مېنىڭ باھايىم',
					path: '/pagesA/my/evaluate'
				},
				{
					icon: '/static/image/invite.png',
					width: '33rpx',
					height: '30rpx',
					zh: '邀请好友',
					en: 'دوست تەكلىپ قىلىش'
				},
				{
					icon: '/static/image/opinion.png',
					width: '28rpx',
					height: '30rpx',
					zh: '意见反馈',
					en: 'پىكىر ئىنكاس قايتۇرۇش',
					path: '/pagesA/my/feedback'
				},
				{
					icon: '/static/image/regards.png',
					width: '30rpx',
					height: '30rpx',
					zh: '关于我们',
					en: 'بىز توغرىسىدا',
					path: '/pagesA/my/about'
				},
				{
					icon: '/static/image/set.png',
					width: '30rpx',
					height: '30rpx',
					zh: '设置',
					en: 'تەسىس قىلىش',
					path: '/pagesA/my/set'
				}
			],
			status: 0,
			show: false,
			member: {},
			btnStyle: {
				background: '#FFC100',
				width: '390rpx',
				height: '90rpx',
				margin: '90rpx auto 0rpx',
				border: 'none',
				color: '#000'
			},
			price: '',
			order_id: ''
		};
	},
	computed: {
		...mapGetters(['userInfo', 'isLogin']),
		language() {
			return this._i18n.locale;
		}
	},
	onShareAppMessage() {
		return {
			path: '/pages/home/index',
			imageUrl: '/static/image/share.png',
			title: '订餐就上小订铛'
		};
	},
	onLoad() {
		uni.$on('getMember', () => {
			this.getMember();
			this.isApply();
		});
	},
	onShow() {
		if (this.isLogin) {
			this.getUserInfo(uni.getStorageSync('token'));
			this.isApply();
			this.getMember();
		}
	},
	methods: {
		...mapActions(['getUserInfo']),
		getDredge() {
			uni.showLoading({
				title: '开通中...',
				mask: true
			});
			this.$http
				.post('wanlshop/user/vipUser', {
					money: this.price,
					type: 'wechat'
				})
				.then(res => {
					uni.hideLoading();
					if (res.code == 1) {
						this.getPay(res.data);
					}
				});
		},
		getPay(data) {
			uni.showLoading({
				title: '开通中...',
				mask: true
			});
			this.$http
				.post('wanlshop/pay/payment', {
					price: this.price,
					order_id: data.list.order_id,
					order_type: 'vip',
					type: 'wechat',
					access_token: data.token,
					method: 'miniapp',
					code: uni.getStorageSync('code')
				})
				.then(res => {
					uni.hideLoading();
					if (res.code == 1) {
						uni.requestPayment({
							provider: 'wxpay',
							appId: res.data.appId,
							nonceStr: res.data.nonceStr,
							package: res.data.package,
							paySign: res.data.paySign,
							timeStamp: res.data.timeStamp,
							signType: res.data.signType,
							success: info => {
								this.show = false;
								this.getUserInfo(uni.getStorageSync('token'));
								uni.$u.toast('开通成功');
							},
							fail: err => {}
						});
					}
				});
		},
		goMember() {
			this.isLogin ? (this.show = true) : uni.$u.route('/pagesA/my/login');
		},
		getMember() {
			this.$http.get('wanlshop/user/vipUser').then(res => {
				if (res.code == 1) {
					this.member = res.data;
				}
			});
		},
		isApply() {
			this.$http.post('wanlshop/shop/isApply').then(res => {
				if (res.code == 1) {
					this.status = Number(res.data);
				}
			});
		},
		goProfile() {
			this.isLogin ? uni.$u.route('/pagesA/my/profile') : uni.$u.route('/pagesA/my/login');
		},
		goDetail(type) {
			if (this.isLogin) {
				switch (type) {
					case 'merchant':
						if (this.status == 0 || this.status == 4) {
							uni.$u.route('/pagesA/my/merchant?type=add');
						} else if (this.status == 2) {
							uni.$u.toast('商家入驻信息审核中');
						} else if (this.status == 9) {
							uni.$u.toast('请先进行实名认证');
						} else {
							uni.$u.route('/pagesA/my/merchantHome');
						}
						break;
					default:
						uni.$u.route('/pagesA/my/' + type);
				}
			} else {
				uni.$u.route('/pagesA/my/login');
			}
		},
		goPath(item) {
			console.log(item, 'eeeeeeeeeeeeeee');
			this.isLogin ? uni.$u.route(item.path) : uni.$u.route('/pagesA/my/login');
		}
	}
};
</script>
<style>
page {
	background-color: #f4f6f8;
}
</style>
<style lang="scss" scoped>
button {
	line-height: 0;
	background: transparent !important;
	padding: 0;
	margin: 0;
}
button::after {
	border: none;
}
.member_image {
	width: 38rpx;
	height: 29rpx;
}
.member_popup {
	background-image: url();
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 610rpx;
	height: 750rpx;
	box-sizing: border-box;
	padding: 40rpx;
	.grid_3 {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-column-gap: 20rpx;
		grid-row-gap: 20rpx;
	}
	.grid_item {
		border: 4rpx solid #f2f1f1;
		padding: 25rpx;
		box-sizing: border-box;
		border-radius: 20rpx 50rpx 20rpx 20rpx;
		.grid_price {
			display: flex;
			color: #fe6243;
			margin-top: 30rpx;
			.price_left {
				font-size: 26rpx;
				margin-top: 17rpx;
			}
			.price_right {
				font-size: 45rpx;
				font-weight: bold;
			}
		}
	}
	.active {
		border: 4rpx solid #f9c1af;
		border-radius: 20rpx 50rpx 20rpx 20rpx;
	}
}
.bgc {
	background-repeat: no-repeat;
	background-size: 100% 100%;
	box-sizing: border-box;
	height: 260rpx;
	background-color: #fff;
	position: relative;
	background-image: url();

	.profile {
		width: 137rpx;
		height: 137rpx;
		border-radius: 50%;
		background-color: #fff;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: -35px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

.content {
	padding: 0rpx 15rpx 30rpx;

	.userinfo {
		background-image: url();
		background-repeat: no-repeat;
		background-size: 100% 100%;
		height: 240rpx;
		margin-top: 20rpx;
		margin-left: 10rpx;
		padding: 75rpx 50rpx 0;
		box-sizing: border-box;

		.userinfo_text {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.name {
				color: #1c1c1c;
				font-size: 38rpx;
				font-weight: bold;
				margin-right: 20rpx;
			}

			.phone {
				color: #989898;
				font-size: 24rpx;
			}

			.right {
				width: 44rpx;
				height: 44rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.attestation {
				display: flex;
				align-items: center;
				background-color: #fff8e2;
				padding: 7rpx 18rpx;
				color: #ff9f04;
				font-size: 26rpx;
				border-radius: 100rpx;

				image {
					width: 35rpx;
					height: 35rpx;
					margin-right: 5rpx;
				}
			}

			.sex {
				color: #989898;
				font-size: 24rpx;
				margin: 0rpx 40rpx;
			}
		}
	}

	.member {
		background-image: url();
		background-repeat: no-repeat;
		background-size: 100% 100%;
		height: 300rpx;
		padding: 30rpx;
		width: 93.5%;
		margin: 10rpx auto;
		box-sizing: border-box;
		.member_yes,
		.member_no {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.member_2 {
			width: 135rpx;
			height: 50rpx;
		}

		.left_no {
			display: flex;
			align-items: center;
			font-size: 24rpx;
			font-family: PingFang-SC-ExtraLight, PingFang-SC;
			font-weight: 200;
			color: #f4da95;
			line-height: 33rpx;

			.member_img {
				width: 38rpx;
				height: 30rpx;
				margin-right: 10rpx;
			}

			.member_1 {
				width: 125rpx;
				height: 30rpx;
				margin-right: 20rpx;
			}
		}
	}

	.box {
		background-color: #fff;
		border-radius: 35rpx;
		width: 94%;
		margin: -210rpx auto 10rpx;
		padding: 30rpx;
		box-sizing: border-box;

		.grid_2 {
			display: grid;
			grid-template-columns: 1fr 1fr;
			grid-column-gap: 20rpx;
			margin-bottom: 20rpx;

			.discounts,
			.wallet {
				background-image: url();
				background-repeat: no-repeat;
				background-size: 100% 100%;
				height: 152rpx;
				padding: 36rpx 34rpx;
				box-sizing: border-box;
			}

			.discounts {
				background-image: url();
			}
		}

		.merchant {
			background-image: url();
			background-repeat: no-repeat;
			background-size: 100% 100%;
			height: 152rpx;
			padding: 36rpx 34rpx;
			box-sizing: border-box;
		}

		.list {
			padding: 0rpx 20rpx;
			margin-top: 20rpx;

			.item {
				padding: 40rpx 0rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			.item:last-child {
				padding: 40rpx 0 20rpx;
			}
		}
	}
}
</style>
